<template>
  <div class="main">
    <el-input
      v-model="searchKeyword"
      placeholder="请输入搜索关键字"
      clearable
      @clear="clearSearch"
      @keydown.enter="handleSearch"
    />
    <el-button type="primary" @click="handleSearch">搜索</el-button>
    <el-button type="primary" @click="handleAll">显示全部</el-button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { searchApi, fileListApi } from "@/utils/api";
import { useStore } from "vuex";

const searchKeyword = ref("");
const store = useStore();

const handleSearch = () => {
  const keyword = searchKeyword.value;
  searchApi({
    params: keyword,
  }).then((res) => {
    let result = res.data[0];
    console.log(result);
    store.commit("setSearchResult", result); // 调用 setSearchResult mutation 更新 searchResult 状态
  });
};

const handleAll = () => {
  window.location.reload();
};

const clearSearch = () => {
  searchKeyword.value = "";
};
</script>

<style lang="less" scoped>
.main {
  display: flex;
  align-items: center;
  justify-content: left;
  margin-top: 50px;

  .el-input {
    width: 300px;
  }
}
</style>
